<template>
  <ElDialog
    :model-value="visible"
    title="商户余额明细"
    width="80%"
    :before-close="handleClose"
    destroy-on-close
  >
    <div class="balance-detail-content">
      <div class="merchant-summary" v-if="balanceData">
        <ElRow :gutter="20">
          <ElCol :span="6">
            <div class="summary-item">
              <div class="label">商户名称</div>
              <div class="value">{{ balanceData.merchantName }}</div>
            </div>
          </ElCol>
          <ElCol :span="6">
            <div class="summary-item">
              <div class="label">商户编码</div>
              <div class="value">{{ balanceData.merchantCode }}</div>
            </div>
          </ElCol>
          <ElCol :span="6">
            <div class="summary-item">
              <div class="label">当前余额</div>
              <div class="value balance">
                ¥{{ formatCurrency(balanceData.currentBalance) }}
              </div>
            </div>
          </ElCol>
          <ElCol :span="6">
            <div class="summary-item">
              <div class="label">信用额度</div>
              <div class="value">
                ¥{{ formatCurrency(balanceData.creditLimit || 0) }}
              </div>
            </div>
          </ElCol>
        </ElRow>
      </div>

      <ElDivider>交易明细</ElDivider>

      <div class="detail-search">
        <ElForm :inline="true">
          <ElFormItem label="交易类型">
            <ElSelect v-model="searchForm.type" placeholder="全部" clearable>
              <ElOption label="入账" value="credit" />
              <ElOption label="出账" value="debit" />
              <ElOption label="调整" value="adjustment" />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="时间范围">
            <ElDatePicker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary">查询</ElButton>
          </ElFormItem>
        </ElForm>
      </div>

      <ElTable :data="mockDetailData" border>
        <ElTableColumn prop="createTime" label="交易时间" width="180" />
        <ElTableColumn prop="type" label="交易类型" width="100">
          <template #default="{ row }">
            <ElTag :type="getTypeColor(row.type)">
              {{ getTypeText(row.type) }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="amount" label="交易金额" width="120" align="right">
          <template #default="{ row }">
            <span :class="row.type === 'credit' ? 'positive' : 'negative'">
              {{ row.type === "credit" ? "+" : "-" }}¥{{
                formatCurrency(Math.abs(row.amount))
              }}
            </span>
          </template>
        </ElTableColumn>
        <ElTableColumn
          prop="balanceBefore"
          label="交易前余额"
          width="120"
          align="right"
        >
          <template #default="{ row }">
            ¥{{ formatCurrency(row.balanceBefore) }}
          </template>
        </ElTableColumn>
        <ElTableColumn
          prop="balanceAfter"
          label="交易后余额"
          width="120"
          align="right"
        >
          <template #default="{ row }">
            ¥{{ formatCurrency(row.balanceAfter) }}
          </template>
        </ElTableColumn>
        <ElTableColumn prop="orderNo" label="关联订单" width="150" />
        <ElTableColumn prop="description" label="备注" min-width="200" />
      </ElTable>

      <div class="pagination-wrapper">
        <ElPagination
          :total="100"
          :page-size="10"
          :current-page="1"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>

    <template #footer>
      <ElButton @click="handleClose">关闭</ElButton>
      <ElButton type="primary">导出明细</ElButton>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { reactive } from "vue";

defineOptions({ name: "WmsMerchantBalanceDetailDialog" });

interface Props {
  visible: boolean;
  balanceData?: WMS.Basic.MerchantBalanceInfo | null;
}

defineProps<Props>();

const emit = defineEmits<{
  "update:visible": [visible: boolean];
}>();

const searchForm = reactive({
  type: "",
  dateRange: [] as string[],
});

// 模拟明细数据
const mockDetailData = [
  {
    id: 1,
    createTime: "2024-01-15 10:30:00",
    type: "credit",
    amount: 1000.0,
    balanceBefore: 500.0,
    balanceAfter: 1500.0,
    orderNo: "SO20240115001",
    description: "销售订单收款",
  },
  {
    id: 2,
    createTime: "2024-01-14 14:20:00",
    type: "debit",
    amount: 200.0,
    balanceBefore: 700.0,
    balanceAfter: 500.0,
    orderNo: "PO20240114002",
    description: "采购订单付款",
  },
];

const formatCurrency = (amount: number) => {
  return (
    amount?.toLocaleString("zh-CN", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }) || "0.00"
  );
};

const getTypeColor = (type: string) => {
  const colorMap = {
    credit: "success",
    debit: "danger",
    adjustment: "warning",
  };
  return colorMap[type] || "info";
};

const getTypeText = (type: string) => {
  const textMap = {
    credit: "入账",
    debit: "出账",
    adjustment: "调整",
  };
  return textMap[type] || "未知";
};

const handleClose = () => {
  emit("update:visible", false);
};
</script>

<style lang="scss" scoped>
.balance-detail-content {
  .merchant-summary {
    background: var(--el-fill-color-light);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;

    .summary-item {
      text-align: center;

      .label {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        margin-bottom: 8px;
      }

      .value {
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);

        &.balance {
          color: var(--el-color-success);
        }
      }
    }
  }

  .detail-search {
    margin-bottom: 16px;
  }

  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .positive {
    color: var(--el-color-success);
  }

  .negative {
    color: var(--el-color-danger);
  }
}
</style>
